import React, { useCallback, useEffect, useState } from 'react'
import { Table, Space, Modal, Button  } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import axios from '../../../../http/index'
import './css/DataList.scss'

export default function DataList() {
    useEffect(() => {
        // axios({
        //     method: 'GET',
        //     url: '/system/afterloan/normalpay/queryNormal',
        //     params: {
        //         currentPage: 1,
        //         pageSize: 5
        //     }
        // }).then((res) => {
        //     console.log(res)
        // }).catch((err) => {
        //     console.log(err)
        // })
        console.log('useEffect')
    }, [])
      const columns = [
        {
          title: '合同编号',
          dataIndex: 'contract_no',
          key: 'contract_no',
          width: 120
        },
        {
          title: '用户账号',
          dataIndex: 'account',
          key: 'account',
          width: 120
        },
        {
          title: '用户姓名',
          dataIndex: 'name',
          key: 'name',
          width: 120
        },
        {
            title: '资金方',
            dataIndex: 'funding_side',
            key: 'funding_side',
            width: 120
        },
        {
            title: '贷款总额',
            dataIndex: 'loan_amount',
            key: 'loan_amount',
            width: 120
        },
        {
            title: '应还款日',
            dataIndex: 'due_date',
            key: 'due_date',
            width: 120
        },
        {
            title: '还款期数',
            dataIndex: 'repayment_period',
            key: 'repayment_period',
            width: 120,
        },
        {
            title: '还款类型',
            dataIndex: 'repayment_type',
            key: 'repayment_type',
            width: 140,
            render: (text, record) => {
                if(record.repayment_type===1){
                    return (
                        <span>提前当期还清</span>
                    )
                } if(record.repayment_type===2){
                    return (
                        <span>提前一次性结清</span>
                    )
                }
            }
        },
        {
            title: '贷款产品',
            dataIndex: 'loan_product',
            key: 'loan_product',
            width: 120
        },
        {
            title: '产品利率',
            dataIndex: 'product_rate',
            key: 'product_rate',
            width: 120
        },
        {
            title: '应还本金',
            dataIndex: 'principal_repayable',
            key: 'principal_repayable',
            width: 120
        },
        {
            title: '应还利息',
            dataIndex: 'interest_repayable',
            key: 'interest_repayable',
            width: 120
        },
        {
            title: '保证金',
            dataIndex: 'security_deposit',
            key: 'security_deposit',
            width: 120
        },
        {
            title: '应还总额',
            dataIndex: 'total_amount_due',
            key: 'total_amount_due',
            width: 120
        },
        {
            title: '实还本金',
            dataIndex: 'principal_repayment',
            key: 'principal_repayment',
            width: 120
        },
        {
            title: '实还利息',
            dataIndex: 'real_interest',
            key: 'real_interest',
            width: 120
        },
        {
            title: '实还总额',
            dataIndex: 'total_net_repayments',
            key: 'total_net_repayments',
            width: 120
        },
        {
            title: '实还日期',
            dataIndex: 'adue_date',
            key: 'adue_date',
            width: 120
        },
        {
            title: '利息损失',
            dataIndex: 'loss_interest',
            key: 'loss_interest',
            width: 120
        },
        {
            title: '划扣状态',
            dataIndex: 'scyffing_condition',
            key: 'scyffing_condition',
            width: 120,
            render: (text, record) => {
                if(record.scyffing_condition===1){
                    return (
                        <span>已划扣</span>
                    )
                } if(record.scyffing_condition===2){
                    return (
                        <span>线下划扣</span>
                    )
                } if(record.scyffing_condition===3){
                    return (
                        <span>未划扣</span>
                    )
                }
            }
        }
      ];
      const dataList = [
        {
          id: 1,
          contract_no: "08041210495",
          account: 15315130950,
          name: "蔡文学",
          phone: 18660813695,
          funding_side: "苏州银行",
          loan_amount: "¥2000.00",
          due_date: "2018-09-10",
          repayment_period: "9/12",
          repayment_type: 1,
          audit_results: 2,
          loan_product: "工薪贷",
          product_rate: 1.1,
          principal_repayable: 0.00,
          interest_repayable: 1045.00,
          security_deposit: 0.00,
          total_amount_due: 1045.00,
          principal_repayment: 1045.00,
          real_interest: 0.00,
          total_net_repayments: 1045.00,
          adue_date: "2018-08-01",
          loss_interest: 0.00,
          scyffing_condition: 1
        },
        {
          id: 2,
          contract_no: "08041210495",
          account: 15315130950,
          name: "黄小明",
          phone: 18660813695,
          funding_side: "齐鲁银行",
          loan_amount: "¥2000.00",
          due_date: "2018-09-10",
          repayment_period: "3/24",
          repayment_type: 1,
          audit_results: 1,
          loan_product: "齐鲁1号",
          product_rate: 1.1,
          principal_repayable: 0.00,
          interest_repayable: 1045.00,
          security_deposit: 0.00,
          total_amount_due: 1045.00,
          principal_repayment: 1045.00,
          real_interest: 0.00,
          total_net_repayments: 1045.00,
          adue_date: "2018-08-01",
          loss_interest: 0.00,
          scyffing_condition: 1
        },
        {
          id: 3,
          contract_no: "08041210495",
          account: 15315130950,
          name: "张杰",
          phone: 18660813695,
          funding_side: "建设银行",
          loan_amount: "¥2000.00",
          due_date: "2018-09-10",
          repayment_period: "4/36",
          repayment_type: 2,
          audit_results: 2,
          loan_product: "快贷",
          product_rate: 1.1,
          principal_repayable: 0.00,
          interest_repayable: 1045.00,
          security_deposit: 0.00,
          total_amount_due: 1045.00,
          principal_repayment: 1045.00,
          real_interest: 0.00,
          total_net_repayments: 1045.00,
          adue_date: "2018-08-01",
          loss_interest: 0.00,
          scyffing_condition: 1
        },
    ]

    return (
        <div className='box3'>
            <div className='top'>
                <span className='title1'>数据列表</span>
            </div>
            <div className='list'>
                <Table scroll={{ x: 2500 }} rowKey={record => record.id} dataSource={dataList} columns={columns} pagination={{pageSize:5, total: 100, showSizeChanger:false}} />
            </div>
        </div>
    )
}
